<template>
  <view class="exam-card"
    :class="[showPanel === undefined ? '' : showPanel ? 'slide-up' : 'slide-down']">
    <!-- 头部 -->
    <view class="card-header">
      <!-- 收藏 -->
      <view class="fav" @click="onFav">
        <text v-if="isFav" class="iconfont icon-fav-fill warning-color"></text>
        <text v-else class="iconfont icon-fav"></text>
        <text decode>&nbsp;收藏</text>
      </view>
      <!-- 对错情况 - 只有刷题模式和答题模式交卷后显示 -->
      <view class="score" v-if="examType == config.examTypeDict[1] || isCompleted">
        <text class="iconfont icon-correct primary-color"></text>
        <text decode
          class="primary-color">&nbsp;{{ correctNum }}&nbsp;&nbsp;</text>
        <text class="iconfont icon-wrong error-color"></text>
        <text decode class="error-color">&nbsp;{{ wrongNum }}</text>
      </view>
      <!-- 模拟考试倒计时 -->
      <view class="" v-else-if="examType == config.examTypeDict[2] && !isCompleted">
        <uni-countdown :show-day="false" :minute="config.countdown"
          @timeup="timeup"></uni-countdown>
      </view>
      <!-- 答题卡面板 -->
      <view class="statistics" @click="openPanel">
        <text class="iconfont icon-grid success-color"></text>
        <text decode
          class="success-color">&nbsp;{{ index }}&nbsp;/&nbsp;{{ total || '--' }}</text>
      </view>
    </view>
    <!-- 面板 -->
    <view class="card-panel" v-if="showPanel">
      <scroll-view scroll-y class="panel-scroll">
        <view class="panel-content">
          <view class="topic" v-for="(item, index) in examData"
            :key="item.exam_id" @click="skipTopic(item, index)">
            <view class="topic-item"
              :class="[item.exam_id === curPaper.data?.exam_id ? 'active' : '']">
              <text>{{ +index + 1 }}</text>
            </view>
            <view class="icon-bg iconfont" :class="topicMark(item)"></view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <!-- 遮罩层 -->
  <view class="mask" v-if="showPanel" @click="closePanel"></view>
</template>

<script setup>
import { computed, inject, onUnmounted, ref, watch } from 'vue'
import config from './config.js'

const examData = inject('sv-exam-data')
const examType = inject('sv-exam-type')
const examFavs = inject('sv-exam-favs')

const props = defineProps({
  // 当前题目
  paper: {
    type: Object,
    default: () => {}
  },
})

const emits = defineEmits(['update:paper'])

const total = computed(() => {
  return examData.value.length
})

const curPaper = computed(() => {
  return props.paper
})

const index = computed(() => {
  return +curPaper.value.index + 1
})

const correctNum = computed(() => {
  return examData.value.filter((it) => it.correct === true && it.submit === true).length
})
const wrongNum = computed(() => {
  return examData.value.filter((it) => it.correct === false && it.submit === true).length
})

const isFav = ref(false)

const showPanel = ref() // 默认为undefined不添加动画

watch(() => props.paper, () => {
  // 判断是否已收藏
  isFav.value = examFavs.value?.some((item) => item.exam_id === curPaper.value.data?.exam_id)
}, { immediate: true })

let throttleNow = 0

function onFav() {
  if (Date.now() - throttleNow < config.favThrottle) {
    uni.showToast({
      title: config.favThrottleText,
      icon: 'none'
    })
    return
  }
  // 节流标志更新赋值
  throttleNow = Date.now()

  isFav.value = !isFav.value

  uni.$emit('e-exam-paper-item-fav', { paper: curPaper.value, isfav: isFav.value })
}

function openPanel() {
  showPanel.value = !showPanel.value
}

function closePanel() {
  showPanel.value = false
}

function skipTopic(data, index) {
  emits('update:paper', { data, index })
  // 关闭面板
  closePanel()
}

/**
 * 做题标记
 * @param {Object} item 当前题目情况
 * 规则:
 * 1. 未做: 空
 * 2. 已做未提交: 已做标记
 * 2. 已提交做错: 错误标记
 * 3. 已提交做对: 正确标记
 */
function topicMark(item) {
  if (item.submit) {
    // 已提交
    if (item.correct) {
      // 做对
      return 'icon-correct primary-color'
    } else {
      // 做错
      return 'icon-wrong error-color'
    }
  } else {
    // 未提交
    if (item.selected && item.selected.length > 0) {
      // 已做
      return 'icon-select success-color'
    } else {
      // 未做
      return ''
    }
  }
}

const isCompleted = ref(false)
// 监听提交/交卷
onSubmited()

function onSubmited() {
  // 单个题目提交
  uni.$on('e-exam-paper-item-submit', (e) => {
    examData.value[e.index]['correct'] = e.correct
  })
  // 整张试卷交卷
  uni.$on('e-exam-paper-complete', () => {
    isCompleted.value = true
  })
}

function timeup() {
  uni.showModal({
    title: '系统提示',
    content: '考试时间结束，请交卷',
    showCancel: false,
    success: ({ confirm }) => {
      if (confirm) {
        uni.$emit('e-exam-paper-complete', examData.value)
      }
    }
  })
}

onUnmounted(() => {
  // 移除事件监听
  uni.$off('e-exam-paper-item-submit')
  uni.$off('e-exam-paper-complete')
  uni.$off('e-exam-paper-item-fav')
})
</script>

<style lang="scss">
@import url('./icons/iconfont.css');

.exam-card {
  width: 100%;
  height: var(--card-height);
  border-top: 1px solid #{var(--border-color)};
  position: fixed;
  bottom: calc(#{var(--card-header-height) - var(--card-height)});
  z-index: 9;
  background-color: var(--bg-color);
  box-sizing: border-box;

  .card-header {
    height: var(--card-header-height);
    padding: 0 #{var(--paper-unit-12)};
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .fav {
      cursor: pointer;
    }

    .score {}

    .statistics {
      cursor: pointer;
    }
  }

  .card-panel {
    height: calc(100% - #{var(--card-header-height)});
    box-sizing: border-box;
    border-top: 1px solid #{var(--border-color)};

    .panel-scroll {
      height: 100%;
    }

    .panel-content {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: var(--paper-unit-12);
      padding: var(--paper-unit-12);

      .topic {
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .topic-item {
          width: 40px;
          height: 40px;
          border: 1px solid #{var(--border-color)};
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          font-weight: 700;

          &.active {
            border: 1px solid #{var(--border-highlight-color)};
          }
        }

        .icon-bg {
          width: 40px;
          height: 40px;
          font-size: 40px;
          opacity: 0.4;
          position: absolute;
          top: 50%;
          left: 50%;
          right: 0;
          bottom: 0;
          transform: translate(-50%, -50%);
          z-index: -1;
        }
      }
    }
  }
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}

.primary-color {
  color: var(--primary-color);
}

.success-color {
  color: var(--success-color);
}

.warning-color {
  color: var(--warning-color);
}

.error-color {
  color: var(--error-color);
}

.info-color {
  color: var(--info-color);
}

.slide-up {
  animation: slide-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-down {
  animation: slide-down 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(#{var(--card-header-height)} - 100%));
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(calc(#{var(--card-header-height)} - 100%));
  }

  100% {
    transform: translateY(0);
  }
}
</style>